<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div>123</div>
    <ul>
        <li></li>
        <li>
            <section>
                <span></span>
            </section>
        </li>
        <li></li>
    </ul>
    <img src="./imgs/src=http___pic.jj20.com_up_allimg_1113_041R0124537_20041Q24537-6-1200.jpg&refer=http___pic.jj20.webp" alt="">
    <span></span>
    <img src="./imgs/QQ图片20220416090104.png" alt="">
    <img src="./imgs/微信图片_20220324134159.jpg" alt="">
    <script>
        // JQuery是一个前端JS工具库。它里面提供了很多方法，可以帮助我们快速的选择元素、创建元素、获取样式、设置属性、删除元素、发送ajax、添加事件等等等等
        // 参考网站：https://jquery.cuishifeng.cn/
        // 官方网站：https://jquery.com/
        // 中文网站：https://www.jquery123.com/


        // 下载 npm install jquery  
        // 下载之后 打开node_modules目录 里面有一个dist目录 打开会发现 jquery.min.js 和 jquery.js 
        // jquery.min.js 压缩之后的生产版本
        // jquery.js 未压缩的源代码


        // 想要使用JQuery 必须得引入jQuery.js文件 压缩的和未压缩的都可以 它们的功能是一致的 只有文件体积不一致。
        // 引入js文件之后 它一定会向开发者提供使用方式 
        // 使用方式： $ 、 jQuery
        // console.log($)
        // console.log(jQuery)


        // 使用jQuery 可以做到很多事情 
        // $函数的作用  
        // 1 选择元素  参数是选择器 返回值是jQuery对象 为了区别于原生元素 我们一般推荐在jQuery对象前面加$以示区别   
        // 顺便一提：因为jQuery获取元素只有一个$函数 没有单选和多选 所以选择器的写法就决定了能获取多少元素 尽可能多的匹配元素
        // var $span = $("span");
        // console.log($span)
        // 有了jQuery对象 我们就可以使用jQuery提供的方法进行一系列操作

        // 举例：设置内部文本
        // $span.html("你好")
        // 举例：设置样式
        // $span.css("font-size", "100px")

        // 2 创建元素
        // var $div = $(`<div>我是被jQuery创建出来的</div>`)
        // $div.appendTo("body")


        // 3 将原生元素转为jQuery对象
        // var img = document.createElement("img");
        // console.log(img)
        // console.log($(img))


        // 4 推迟代码执行
        // 立即执行的代码
        // var d = new Date();
        // console.log(1);

        // // 页面所有资源加载完毕的时候的代码执行
        // window.onload = function() {
        //     console.log(2)
        //     console.log( new Date - d)
        // }
            
        // // 页面结构准备就绪执行的代码
        // $(() => {
        //     console.log(3)
        //     console.log( new Date - d)
        // });

     
    </script>
</body>

</html>